<template>
  <div>
    <div class="d-flxed todo-msg-list" style="top: 20px; right: 20px">
      <transition-group name="fade" apper tag="div">
        <div
          v-for="(item, index) in state.msgList"
          :class="`todo-msg-item-${index}`"
          :key="index"
          v-show="item.show"
        >
          <div>
            <a-icon
              type="exclamation-circle"
              :style="{
                width: item.iconSize + 'px',
                height: item.iconSize + 'px'
              }"
            />
            <p class="msg-content">
              {{
                `${item.cp}&nbsp;${item.todoTypeText}的待办操作待办任务发送完成`
              }}
            </p>
          </div>
        </div>
        <!-- <div
          class="todo-msg-item"
          :key="2"
          v-show="state.showMsgList">
          <div>
            <a-icon
              type="exclamation-circle"
              :style="{'width': state.iconSize + 'px', 'he': state.iconSize + 'px'}" />
            <p class="msg-content">
              CP号调整工艺的待办操作留言板通知完成
            </p>
          </div>
        </div>
        <div
          class="todo-msg-item"
          :key="3"
          v-show="state.showMsgList">
          <div>
            <a-icon
              type="exclamation-circle"
              :style="{'width': state.iconSize + 'px', 'he': state.iconSize + 'px'}" />
            <p class="msg-content">
              CP号调整工艺的待办操作留言板通知完成
            </p>
          </div>
        </div> -->
      </transition-group>
    </div>
    <div
      v-if="!state.showModal"
      class="d-flxed todo_btn_lite"
      :style="{ right: state.rightOffset + 'px', top: state.topOffset + 'px' }"
      v-drag
      id="drag"
      v-show="state.showLiteBtn"
    >
      <span class="text">待办</span>
      <div class="dot" v-if="state.todoNum > 0 && state.todoNum < 100" />
    </div>
    <!--  按钮部分 -->
    <div
      class="d-flxed todo_btn"
      :class="{ dragging: state.isDragging }"
      :style="{ right: state.rightOffset + 'px', top: state.topOffset + 'px' }"
      v-show="state.showBtn"
    >
      <!--    @mousedown="startDrag"
      @mousemove="onDrag"
      @mouseup="endDrag"   -->
      <div class="close_button" @click.prevent="closeIcon">
        <span class="close-icon">×</span>
      </div>
      <div class="todo_icon" @click.prevent="openModal">
        <img src="@/assets/img/todoIcon.svg" />
      </div>
      <div :class="{ todo_num: true }" v-show="state.todoNum > 0">
        <!--        {{ (state.todoNum < 100) ? state.todoNum : "..." }}-->
        <span
          v-if="state.todoNum > 0 && state.todoNum < 100"
          :class="state.todoNum < 10 ? 'num_one' : 'num_two'"
        >
          {{ state.todoNum }}
        </span>
        <span v-else class="num_more"> 99+</span>
      </div>
      <!-- </div> -->
      <!--  弹出框-->
      <!-- <a-modal
      ref="todoTable"
      :class="['todoModal']"
      width="100%"
      :visible.sync="state.showModal"
      title="我的待办"
      :footer="null"
      @cancel="state.showModal = false"
      :destroy-on-close="true"
    >
      <todo-table-content />
    </a-modal> -->

      <!-- </div> -->
    </div>
    <a-drawer
      title="我的待办"
      v-if="state.showModal"
      width="100%"
      placement="right"
      :visible="state.showModal"
      @close="closeModal"
      :style="{ '--scrollX': state.scrollX + 'px' }"
      class="todo-modal"
    >
      <todo-table-content
        @todoTableContentClick="todoTableContentClickHandler"
      />
    </a-drawer>
  </div>
</template>
<script>
import todoTableContent from '@/components/todoTable/mainContent.vue'
import { todo_count_get } from '@/server/modules/7537'
export default {
  name: 'TodoTable',
  components: { todoTableContent },
  data() {
    return {
      state: {
        userId: '',
        todoNum: 0,
        showBtn: false,
        showLiteBtn: true,
        showModal: false,
        isTimerActive: true, // 定时器激活状态
        timer: null, // 定时器对象
        buttonX: 20,
        originX: 0,
        originY: 0,
        buttonY: 0,
        isDragging: false,
        offsetX: 0,
        offsetY: 0,
        rightOffset: 0, // 右边距离，默认值为20px
        topOffset: 20, // 上边距离，默认值为20px
        loadingBoxele: null,
        showMsgList: true,
        msgList: [],
        scrollX: 1300
      }
    }
  },
  directives: {
    drag(el, binding) {
      let oDiv = el // 当前元素
      // let self = this // 上下文
      // 禁止选择网页上的文字
      let clientOffset = {}
      document.onselectstart = function () {
        return false
      }
      oDiv.onmousedown = function (e) {
        clientOffset.clientX = e.clientX
        clientOffset.clientY = e.clientY
        // 鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX
          let t = e.clientY - disY
          // 移动当前元素
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'

          localStorage.setItem('toToTableTop', t)
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
          let that = binding.instance //通过vnode参数来获取this,此时的that就可以获取到js中的this

          that.update()
          if (
            e.clientX === clientOffset.clientX &&
            e.clientY === clientOffset.clientY
          ) {
            //这里触发点击事件，将click方法移入这里
            that.openModal()
          } else {
            oDiv.style.left = 'unset'
            // localStorage.setItem('toToTableRight', 0)
            return //这里是拖拽事件
          }
        }
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    }
  },
  async mounted() {
    this.state.loadingBoxele = document.querySelector('body > loading-boxele')
    this.dotoCountGet()
    this.update()
    this.startTimer()
    setTimeout(
      () => {
        this.stopTimer()
      },
      60 * 10 * 1000
    )
  },
  methods: {
    showBtn() {
      this.state.showBtn = true
      this.state.showLiteBtn = false
    },
    closeIcon() {
      this.state.showBtn = false
      this.state.showLiteBtn = true
      // this.stopTimer()
    },
    // 打开弹窗
    openModal() {
      this.state.loadingBoxele?.remove()
      this.state.showModal = true
    },
    update() {
      this.state.topOffset = localStorage.getItem('toToTableTop')
      this.state.rightOffset = 20
    },
    // 关闭待办弹窗
    closeModal() {
      if (this.state.loadingBoxele) {
        document.body.appendChild(this.state.loadingBoxele)
      }
      this.state.showModal = false
    },
    // 获取当前处理中数量
    async dotoCountGet() {
      const { success, retInfo, data } = await todo_count_get()
      if (success) {
        this.state.todoNum = data.todoCount
      } else {
        console.log(retInfo)
      }
    },
    // 定时器相关
    toggleTimer() {
      // 切换定时器状态
      this.isTimerActive = !this.isTimerActive
      // 如果状态变为true，启动定时器
      if (this.isTimerActive) {
        this.startTimer()
      } else {
        // 如果状态变为false，清除定时器
        this.stopTimer()
      }
    },
    startTimer() {
      // 检查定时器是否已经存在，避免重复创建
      if (!this.state.timer) {
        this.state.timer = setInterval(this.fetchData, 30000) // 每4秒执行一次 fetchData 方法
      }
    },
    stopTimer() {
      // 清除定时器
      if (this.state.timer) {
        clearInterval(this.state.timer)
        this.state.timer = null
      }
    },
    async fetchData() {
      if (this.state.isTimerActive) {
        this.dotoCountGet()
      }
    },
    todoTableContentClickHandler() {
      this.closeModal()
    }
  },
  beforeUnmount() {
    // 在组件销毁前，清除定时器
    this.stopTimer()
  }
}
</script>
<style scoped lang="scss">
.todo_btn {
  width: 44px;
  height: 44px;
  background: #001529 !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  .close_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 0;
    z-index: 999;
    color: white;
  }
  .todo_icon {
    display: flex;
    img {
      margin-left: 5px;
      width: 27px;
      height: 27px;
    }
    img:hover {
      transform: scale(1.1); /* 鼠标悬停时将图标放大到110% */
    }
  }

  .todo_num {
    background-color: red;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    position: absolute;
    bottom: -7px;
    right: -7px;
    .num_one {
      font-size: 14px;
    }
    .num_two {
      font-size: 12px;
    }
    .num_more {
      font-size: 9.5px;
    }
  }
}
.todo_btn:hover .close_button {
  opacity: 1;
  background-color: rgba(129, 119, 119, 0.9);
}
.dragging {
  cursor: grabbing;
}
.todoModal {
  ::v-deep.ant-modal-header {
    text-align: center;
    .ant-modal-title {
      font-weight: bolder;
      font-size: 2vh;
    }
  }
  ::v-deep.ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  ::v-deep.ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  ::v-deep.ant-modal-body {
    flex: 1;
    height: 100%;
  }
}

.c-wrapper {
  display: none;
}

.todo_btn_lite {
  top: 30px;
  right: 0px;
  display: flex;
  width: 20px;
  height: 50px;
  background: #001529 !important;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5%;
  cursor: pointer;
  z-index: 9999;

  .text {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.2;
  }
  .dot {
    border-radius: 50%;
    background: red;
    height: 10px;
    width: 10px;
    position: absolute;
    right: 0px;
  }
}
::v-deep div[class^='todo-msg-item'] {
  background-color: rgb(238, 238, 238);
  margin-right: 10px;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 12px;
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  & > div {
    display: flex;
    flex-direction: row;
    width: 200px;
    i {
      margin-right: 10px;
      svg {
        width: 100%;
        height: 100%;
      }
    }
    p {
      margin-bottom: 0px;
    }
  }
}
.fade-enter-active {
  animation: msg-move-enter 0.5s linear;
}
.fade-leave-active {
  // 过渡动画的使用
  animation: msg-move-leave 0.5s linear 3s;
}
@keyframes msg-move-leave {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}
@keyframes msg-move-enter {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.d-flxed {
  position: fixed;
}
:global(.todo-modal .ant-drawer-wrapper-body) {
  position: relative;
  min-width: var(--scrollX);
}
</style>
